<template>
  <div class="witness_mobile">
    <!-- 页头 -->
    <div class="yetou">
      <div class="none4">
      <div class="bt-left">
        <h1>万力达消防设备大卖场</h1>
        <p>{{configData.mobile}}</p>
      </div>
      <div class="menu">
      <img  @click="hide = !hide" src="../assets/991.jpg" />
      </div>
      </div>
    </div>
    <!-- 页头 -->
     <!--导航开始-->
    <div class="vae" v-show="hide">
      <ul class="nav-tb">
        <li :class="navmoIndex == 0 ? 'active' : ''" @click="selNav(0)">
          <router-link to="/page/home_mobile">首页</router-link>
          <!-- <a href="#">首页</a> -->
        </li>
        <li :class="{ active: navmoIndex === 1 }" @click="selNav(1)">
          <router-link to="/page/product_mobile">消防水泵</router-link>
          <!--  <a href="#">消防水泵</a> -->
        </li>
        <li :class="{ active: navmoIndex === 2 }" @click="selNav(2)">
          <router-link to="/page/product_mobile">水泵控制柜</router-link>
          <!-- <a href="#">水泵控制柜</a> -->
        </li>
        <li :class="{ active: navmoIndex === 3 }" @click="selNav(3)">
          <router-link to="/page/product_mobile">气体灭火</router-link>
          <!--  <a href="#">气体灭火</a> -->
        </li>
        <li :class="{ active: navmoIndex === 4 }" @click="selNav(4)">
          <router-link to="/page/product_mobile">火灾报警</router-link>
          <!--     <a href="#">火灾报警</a> -->
        </li>
        <li :class="{ active: navmoIndex === 5 }" @click="selNav(5)">
          <router-link to="/page/product_mobile">产品中心</router-link>
          <!-- <a href="#">产品中心</a> -->
        </li>
        <li :class="{ active: navmoIndex === 6 }" @click="selNav(6)">
          <router-link to="/page/witness_mobile">客户见证</router-link>
          <!-- <a href="#">客户见证</a> -->
        </li>
        <li :class="{ active: navmoIndex === 7 }" @click="selNav(7)">
          <router-link to="/page/news_mobile">新闻动态</router-link>
          <!-- <a href="#">新闻动态</a> -->
        </li>
        <li :class="{ active: navmoIndex === 8 }" @click="selNav(8)">
          <router-link to="/page/about_mobile">关于我们</router-link>
          <!--  <a href="#">关于我们</a> -->
        </li>
      </ul>
    </div>
    <!--导航结束-->
    <!-- 横幅开始 -->
    <div class="toop">
      <img src="../assets/125.jpg" />
    </div>
    <!-- 横幅结束 -->
    <!-- 客户见证开始 -->
    <div class="gttr">
      <div class="gttr-top">
        <h5>客户见证</h5>
        <div class="cd">{{bok.title}}</div>
        <div class="gttry content" v-html="bok.content">
          <!-- <h1>{{bok.title}}</h1>
          <img :src="bok.img[0]" />
          <p>{{bok.Introduction}}
          </p> -->
        </div>
        <div style="margin-bottom:0.1rem">
          <!-- <img v-for="item in bok.img" :src="item" :key="item" style="width:100%"> -->
        </div>
      </div>
      <div class="cmd"></div>
      <div class="gttr-foot">
        <p v-if="page.before" @click="shang(page.before.id)"><a>上一篇：</a>{{page.before.title}}</p>
        <p v-if="page.last" @click="shang(page.last.id)"><a>下一篇：</a>{{page.last.title}}</p>
      </div>
    </div>
    <!-- 客户见证结束 --> 
    <!--脚部开始-->
    <div class="foot">
      <div class="foot_top">
        <div class="who">
          <h1>联系我们</h1>
          <p>服务热线：{{configData.mobile}}</p>
          <p>QQ：{{configData.qq}}</p>
          <p>地址：{{configData.city}}</p>
        </div>
      </div>
      <div class="foots">
        <div class="whoo">
          <p>
            {{configData.copyright}}<br />
            {{configData.record_number}}
          </p>
        </div>
      </div>
    </div>
    <!--脚部结束-->
  </div>
</template>
<script>
export default {
   data() {
    return {
      navmoIndex: 0,
      hide: false,
      qweid:0,
      bok:{},
      page:{},
       configData:{},
    };
  },
  created() {
    if (localStorage.getItem("navmoIndex")) {
      this.navmoIndex = +localStorage.getItem("navmoIndex");
      console.log(this.navmoIndex);
    }
  },
   computed: {},
  watch: {},
  mounted() {},
  mounted() {
    if (this.$route.query.id) this.qweid = this.$route.query.id
    console.log(this.qweid)
    this.getNewsDetail();
    this.getConfig();
  },
  methods: {
    selNav(a) {
      this.navmoIndex = a;
      localStorage.setItem("navmoIndex", this.navmoIndex);
      console.log(a, this.navmoIndex);
    },
     getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
 
        })
        .catch((error) => {
          console.log(error);
        });
    },
     getNewsDetail() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/index_info?id=" + this.qweid)
        .then((res) => {
          console.log("新闻详情", res.data.result);
          this.bok = res.data.result.list
          console.log(this.bok)
          this.page = res.data.result.page   
        })
        .catch((error) => {
          console.log(error);
        });
    },
     shang(id){
      this.qweid = id
      this.getNewsDetail()
    },
     xia(id){
      this.$router.push({
        path: '/page/newsDetail_mobile',
        query: {
          id: id
        }
      })
    },
  },
};
</script>
<style  scoped>
.witness_mobile {
  max-width: 7.5rem;
  margin: 0 auto;
}
/* 页头 */
.yetou {
  color: #fff;
  background: #0061ae;
  height: 1.4rem;
}
.none4{
  width: 6.9rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.bt-left {
  padding: 0.1rem;
}
.bt-left h1 {
  font-size: 0.45rem;
}
.bt-left p {
  font-size: 0.35rem;
}
.menu img {
  width: 0.8rem;
}

/* 页头 */
/* 导航开始*/
.nav-tb {
  width: 100%;
  text-align: center;
  background: #f9f9f9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}
.vae a {
  display: block;
  border: 1px solid #ededed;
  padding: 0.2rem;
  line-height: 0.4rem;
}
.nav-tb li{
  width: 2.5rem;
}
.nav-tb a:hover {
  color: #ffffff;
  background: #d6af62;
}
/* 导航结束*/
/* 横幅开始 */
.toop img {
  width: 100%;
  margin: 0 auto;
}
/* 横幅结束 */
/* 见证开始 */
.gttr {
  width: 7rem;
  margin: 0 auto;
}
.gttr-top {
  border-bottom: 0.01rem solid #333;
}
.gttr-top h5 {
  font-size: 0.3rem;
  margin-bottom: 0.1rem;
}
.cd{
  font-size: 0.35rem;
  font-weight: bold;
  border-top: 1px solid #333;
  text-align: center;
  padding: 0.2rem 0;
}
/* .cmd{
  border-top: 1px solid #333;
} */
.gttry{
  width: 7rem;
}
.gttry h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
  text-align: center;
}
.gttry img {
  width: 7rem;
}
.gttry p {
  font-size: 0.25rem;
}
.gttr-foot p {
  font-size: 0.25rem;
  padding: 0.1rem;
}
.gttr-foot a {
  color: #0061ae;
}

/* 见证结束 */
/* 页脚开始 */
.foot_top {
  line-height: 0.45rem;
  margin: 0 auto;
  background: #0061ae;
  color: #fff;
  overflow: hidden;
}
.foot_top h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
}
.foot_top p {
  font-size: 0.25rem;
  padding: 0 0.1rem;
  padding-bottom: 0.1rem;
}
.foots {
  line-height: 0.4rem;
  margin: 0 auto;
  background: #666;
  color: #fff;
}
.foots p {
  font-size: 0.2rem;
  text-align: center;
}
.who,
.whoo {
  width: 7rem;
  margin: 0 auto;
}
/* 页脚结束 */
</style>
<style>
.content img{
  width: 100%!important;
  height: auto!important;
}
</style>